* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

body {
  /* css3 盒子布局居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: ghostwhite;
  /* 100vh 该元素会被撑开屏幕高度一致。 */
  height: 100vh;
}

.fan {
  width: 600px;
  height: 300px;
  border: 2px solid darkcyan;
}

.fan > li {
  width: 60px;
  height: 200px;
  background-color: pink;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -100px;

  text-align: center;

  /* 一定要改旋转的的中心点 */
  transform-origin: center bottom;

  /* 需要加过渡使旋转更平滑 */
  transition: all 1s linear;
}

.fan > li:nth-child(5n) {
  background-color: darkturquoise;
}

.fan > li:nth-child(5n + 1) {
  background-color: darksalmon;
}

.fan > li:nth-child(5n + 2) {
  background-color: lightblue;
}

.fan > li:nth-child(5n + 3) {
  background-color: deeppink;
}

.fan > li:nth-child(5n + 4) {
  background-color: lightyellow;
}

.fan:hover > li:nth-child(1) {
  transform: rotate(15deg);
}

.fan:hover > li:nth-child(2) {
  transform: rotate(30deg);
}

.fan:hover > li:nth-child(3) {
  transform: rotate(45deg);
}

.fan:hover > li:nth-child(4) {
  transform: rotate(60deg);
}

.fan:hover > li:nth-child(5) {
  transform: rotate(75deg);
}

.fan:hover > li:nth-child(6) {
  transform: rotate(90deg);
}

.fan:hover > li:nth-child(7) {
  transform: rotate(0deg);
}

.fan:hover > li:nth-child(8) {
  transform: rotate(-15deg);
}

.fan:hover > li:nth-child(9) {
  transform: rotate(-30deg);
}

.fan:hover > li:nth-child(10) {
  transform: rotate(-45deg);
}

.fan:hover > li:nth-child(11) {
  transform: rotate(-60deg);
}

.fan:hover > li:nth-child(12) {
  transform: rotate(-75deg);
}

.fan:hover > li:nth-child(13) {
  transform: rotate(-90deg);
}
